<template>
  <el-scrollbar class="sidebar-container">
    <el-menu
      text-color="#fff"
      :collapse="isCollapse"
      class="el-menu-vertical"
      background-color="#2f4050"
      active-text-color="#ffd04b"
    >
      <el-menu-item
        index="0"
        @click="handleGoHome"
        class="home theme align-center"
      >
        <router-link :to="{ path: '/' }" tag="span" class="fs20 text-bold white"
          >后台管理</router-link
        >
      </el-menu-item>

      <el-submenu
        :key="indexOne"
        :index="String(indexOne + 1)"
        v-for="(layerOne, indexOne) in permitMenuList.children"
      >
        <template slot="title">
          <img
            class="logo inline-block mr10"
            :src="iconUrl(layerOne.meta.icon)"
            alt="logo"
          />
          <span slot="title">{{ layerOne.meta.title }}</span>
        </template>
        <span v-for="(layerTwo, indexTwo) in layerOne.children" :key="indexTwo">
          <el-menu-item-group v-if="layerTwo.meta.index">
            <router-link :to="{ name: layerTwo.name }" tag="span">
              <el-menu-item :index="layerTwo.meta.index">{{
                layerTwo.meta.title
              }}</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </span>
      </el-submenu>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Sider",
  computed: {
    permitMenuList() {
      const [permitMenuList] = this.addRoutes;
      return permitMenuList;
    },
    ...mapGetters(["addRoutes"])
  },
  methods: {
    iconUrl(icon) {
      return `../static/icons/${icon}`;
    },
    handleGoHome() {
      this.$router.push({ name: "layout" });
    }
  },
  props: ["isCollapse"]
};
</script>

<style scoped></style>
